<template>
	<view >
		<view>
			<view class="status_bar">
				<!-- 这里是状态栏占位 -->
			</view>
		</view>
		<!-- 1，搜索框优化 -->
		<!-- 2，悬浮按钮，添加记录 -->
		<uni-search-bar :radius="80" :enableClick="false" @tap="goSearchPage"></uni-search-bar>
		<view class="uni-tab-bar">

			<scroll-view scroll-x class="uni-swiper-tab">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabTab(index)">
						{{tab.name}}
						<view class="swiper-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="uni-tab-bar" style="background-color: #F1F1F1;" >
			<swiper  class="swiper-box" :current="tabIndex" @change="swiperChanged" :style="{height:swiperhight+'px'}">
				<swiper-item   v-for="(items,index) in newsList" :key="index">
					<scroll-view  :style="{height:srowviewhight+'px'}"  scroll-y="true" class="scroll-view-list" @scrolltolower="loadmore()" >
						<uni-list >
							<block v-for="(item,index2) in items.list" :key="index2">
								
								<index-list  class="card"  :item="item" :index="index2"  ></index-list>
								<!-- <card :cardinfo="cardinfo"></card> -->
							</block>
							<view class="load-more">{{loadmoreText}}</view>
						</uni-list>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view @tap="add" class="add-button icon iconfont icon-xiewenzhang1"  />
		<view @tap="refresh" class="refresh-button icon iconfont icon-shuaxin"  />
	</view>
</template>


<script>
	import indexList from "../../components/index/index-list.vue";
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import config from "@/common/config.js"
	import card from '@/components/list-card/list-card.vue'
	export default {

		components: {
			indexList,
			uniList,
			uniListItem,
			uniSearchBar,
			card
		},

		data() {
			return {
				swiperhight: 300,
				srowviewhight: 300,
				tabIndex: 0,
				tabBars: [{
						name: "全站",
						id: "quanzhan"
					}
					// {
					// 	name: "关注",
					// 	id: "guanzhu"
					// },
					// {
					// 	name: "推荐",
					// 	id: "tuijian"
					// },
					// {
					// 	name: "热榜",
					// 	id: "rebang"
					// }
				],
				newsList: [{
						list: []
					}
				],
				loadmoreText: '上拉加载更多',
				isLoadingMore: false,
				currentPage: 1
			}
		},
		onLoad() {
			
			uni.getSystemInfo({
				success: (res) => {
					//减去顶部tab，底部tabbar，顶部搜索,顶部搜索margin-top
					let windowHight = res.windowHeight - uni.upx2px(100) - uni.upx2px(50) - 32 - uni.upx2px(20);
					this.swiperhight = windowHight;
					this.srowviewhight = windowHight - uni.upx2px(50);
				}
			});
			this.getAllTopics(1);
		},
		onPullDownRefresh() {
			console.log('页面整体onPullDownRefresh');
			this.currentPage = 1;
			this.getAllTopics(1);
		},
		methods: {
			
			loadmore() {
				if (!this.isLoadingMore && this.loadmoreText != "没有更多数据") {
					this.isLoadingMore = true;
					this.loadmoreText = "数据加载中..";
					this.getAllTopics(this.currentPage);
				}


			},
			refresh() {
				uni.startPullDownRefresh({
					
				});
				
			},
			getAllTopics(page) {
				var url = config.baseUrl + '/topics?page=' + page;
				uni.request({
					method: 'GET',
					url: url,
					success: (res) => {
						var statusCode = res.statusCode;
						if (200 == statusCode) {
							if (page === 1) {
								this.newsList[0].list = res.data;
							} else {
								this.newsList[0].list = this.newsList[0].list.concat(res.data);
							}
							if (res.data.length > 0) {
								this.loadmoreText = "上拉加载更多";
								this.currentPage = this.currentPage + 1;
							} else {
								this.loadmoreText = "没有更多数据";
							}
						} else {
							console.log('else');
						}
					},
					fail: (res) => {
						console.log('fail');
					},
					complete: () => {
						this.isLoadingMore = false;
						uni.stopPullDownRefresh();
					}
				});
			},
			goSearchPage() {
				uni.navigateTo({
					url: '../searchpage/searchpage'
				})
			},
			//tabBar点击事件
			tabTab(index) {
				this.tabIndex = index;
			},
			//swiper的滚动事件
			swiperChanged(e) {
				console.log(e.detail);
				this.tabIndex = e.detail.current;
			},
			goDetail(item) {

				var rootTopicId = item._id;
				var url = '../recorderdetail/recorderdetail?id=' + rootTopicId;
				uni.navigateTo({
					url
				})
			},
			add(e) {
				//判断一下本地token是否存在
				var token = uni.getStorageSync(config.token);
				if (!token || token.length == 0) {
					uni.navigateTo({
						url: '../../pages/loginnew/loginnew'
					});
					return;
				}
				uni.navigateTo({
					url: '../../pages/addrecorder/addrecorder'
				})

			}

		}
	}
</script>

<style>
	.uni-swiper-tab {
		border-bottom: 1upx solid #EEEEEE;
	}

	.swiper-tab-list {
		color: #969696;
		font-weight: bold;
		font-size: 35upx;
	}

	.uni-swiper-tab .active {
		color: #343434;
	}

	.active .swiper-tab-line {
		border-bottom: 6upx solid #FEDE33;
		width: 70upx;
		margin: auto;
		border-top: 6upx solid #FEDE33;
		border-radius: 30upx;
	}

	.swiper-box {
		height: 900upx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {

		font-size: 36rpx;
		color: #8f8f94;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.uni-searchbar {
		width: 500upx;
		margin-left: 30upx;
		margin-right: 30upx;
		margin-top: 20upx;
	}

	.add-button {
		position: fixed;
		bottom: 100upx;
		right: 30upx;
		font-size: 50upx;
		/* font-weight: bold; */
		color: #007AFF;
	}

	.load-more {
		text-align: center;
		color: #AAAAAA;
		padding: 15upx;
	}

	.refresh-button {
		position: fixed;
		bottom: 200upx;
		right: 30upx;
		font-size: 60upx;
		/* font-weight: bold; */
		color: #007AFF;
	}
	.card {
		width: 100%;
		/* margin-left: 30upx;
		margin-right: 30upx; */
	
	}
	.scroll-view-list{
		margin-left: 30upx;
		margin-right: 30upx;
		width: auto;
	}
	
</style>
